<template>
	<view class="tabbar-box">
		<slot/>
		<view class="iconfont tabbar">
			<view class="con">
				<view
					v-for="(v, i) in tabbar.items"
					:key="i" class="item"
					:style="{'color': i==current?tabbar.activeColor:''}"
					@click="onItemClick(i)">
					<badge :dot="v.dot" :count="v.badge" :offset="[5, -8, 0, 0]">
						<view class="icon">
							{{v.icon}}
						</view>
					</badge>
					<view class="text">{{v.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			'tabs':{type:Object},
			'badge':{type:Object}
		},
		mounted() {
			if(this.badge){
				this.$zp.setTabBarBadge(this.badge)
				this.init()
			}
		},
		data(){
			return{
				tabbar:this.tabs||this.$zp.tabbar,
				current:this.$zp.tabbar.current
			}
		},
		methods:{
			init(){
				this.tabbar = this.tabs||this.$zp.tabbar
			},
			onItemClick(i){
				this.current = i
				this.$zp.tabbar.current = i
				uni.redirectTo({
					url: this.$zp.tabbar.items[i].path
				})
			}
		}
	}
</script>

<style lang="scss">
	$tabHeight: 92upx;
	.tabbar-box{
		height: 100%;
	}
	.tabbar{
		height: $tabHeight;
		.con{
			height: $tabHeight;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: space-around;
		}
		.item{
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			justify-content: center;
		}
		.text{
			width: 100%;
			text-align: center;
		}
		.icon{
			font-size: $font-size-llg + 8;
			line-height: $font-size-llg + 4;
			display:inline-block;
		}
		.text{
			font-size: $font-size-sm;
		}
	}
</style>
